<template>
  <!-- Swipe to close demo sheet -->
  <f7-sheet
    class="demo-sheet backgroundSubColor"
    style="height:auto; --f7-sheet-bg-color: #fff;"
    swipe-to-close
    backdrop
    :opened="songListSheetOpend"
    @sheet:closed="handleClose()"
  >
    <f7-page-content>
      <f7-list inset>
        <f7-list-button v-for="(item,index) in songList" :key="index" 
          :title="item.name" sheet-close :tooltip="item.createDate" @click.stop="handleSelect(item.id)">

        </f7-list-button>
        
       
      </f7-list>
    </f7-page-content>
  </f7-sheet>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import {querySongList} from '@/api/index.js'
export default {
  computed: {
    ...mapGetters({
      getUserInfo:'getUserInfo',
    }),
  },
  props:{
    songListSheetOpend:{
      type:Boolean,
      default:false,
    },

  },
  watch:{
    songListSheetOpend(newVal){
      if (newVal){
        this.getData;
      }
    }
  },
  data(){
    return{
      selectSongListId:-1,//选择的歌单id
      queryData:{
        userId:'',
      },
      songList:[],
    }
  },
  methods: {

    getData(){
      this.queryData.userId = this.getUserInfo.userid;
      querySongList(this.queryData).then(res=>{
        if (res.code === 200){
          this.songList = res.data.songLists;
          if (!this.songList.length && this.getSongListSheetState){
            let self = this;
            this.$f7ready((f7) => {
                let toastTop = f7.toast.create({
                  text: '暂无歌单，请先添加歌单',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
                self.$emit('getSelectSongListId');
              })
          }
        }
        else {
          console.log(res.code);
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    handleClose(){
      if (this.selectSongListId != -1){
        this.$emit('getSelectSongListId',this.selectSongListId);
      }
      else {
        this.$emit('getSelectSongListId');
      }
      
    },
    //n=1表示选择了按钮1
    handleSelect(songListId){
      console.log('selectSongListId',songListId);
      this.selectSongListId = songListId;
    }
  },
  mounted(){
    this.selectSongListId = -1;
    this.getData();
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .sheet-modal {
  $backgroundSubColor: #d4c3c3;
  $spanColor: #212121;
  $borderColor:#2c2c2c;
  /deep/ ul {
    background-color: $backgroundSubColor;
    li {
      border:1px $borderColor solid;
    }
    .list-button{
      color: $spanColor;
    }
    
    
  }
}
.dark .sheet-modal {
  $backgroundSubColor: #592e2e;
  $borderColor:#f0f0f0;
  $spanColor: #ffffff;
  /deep/ ul {
    background-color: $backgroundSubColor;
    li {
      border:1px $borderColor solid;
    }
    .list-button{
      color: $spanColor;
    }
   
  }
}


/deep/ ul{
  max-height: 60vh;
  overflow-y: scroll;
  li {
    margin:0.1rem 0;
    border-radius: 6px;
  }
}
</style>